<template>
    <!-- 自己现进度查看和填写页面 -->
    <div id="MeProcess">
        <div class="ProcessWriteVessels">
            <h1 id="now">#现阶段学习计划</h1>
            <h1 id="name">&lt;&lt;{{Title}}&gt;&gt;</h1>
            <div class="myProcessVessels" v-for="item in proccess" :key="item.id">
                <h1>##{{item.h}}
                    <span class="projects" @click="projectClick">
                        附件
                        <i class="el-icon-chat-line-square"></i>
                        <div class="projectNumber">
                            {{item.project}}
                        </div>
                    </span>
                </h1>
                <div class="myProcessTitle">
                    <!-- 学习计划内容 -->
                    <div class="title">
                        <el-checkbox class="ipt" v-model="item.value"></el-checkbox>
                        <span class="b">学习任务：</span>
                        <span>
                            {{item.title}}
                        </span>
                    </div>
                    <!-- 学习计划小题 -->
                    <div class="topic" v-if="item.value">
                        <span class="b">阶段性测试：</span>{{item.topictTiTLE}}
                        <span class="eixt">
                            <a @click="jump(item.id,item.topictTiTLE)">
                                点击开始答题&gt;&gt;
                            </a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <!-- 附件的容器 -->
        <div id="projectVessels" v-if="projects.keys">
            <div class="projectMiddle">
                <div class="projectHeader">
                    下载附件
                    <div class="projectClose" @click="projectClose">
                        ×
                    </div>
                </div>
                <div class="projectContent">
                    <div class="aloneProject" v-for="item of projects.content" :key="item.id" :id="item.id">
                        {{item.name}}<div class="loadingTopic">下载附件</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name:'MeProcess',
    data(){
        return {
            Title:'大一寒假第一次学习计划',
            //附件容器
            projects:{
                keys:false,//附件容器是否展示
                content:[
                    {
                        id:1,
                        name:'附件1',
                    },
                    {
                        id:2,
                        name:'附件2',
                    },
                    {
                        id:3,
                        name:'附件3',
                    }
                ]
            },
            //我的现阶段学习计划
            proccess:[
                {
                    h:'1',//对应的数字
                    id:0,//对应的id
                    title:'学习jquery的ajax',//学习计划具体内容
                    value:false,//学习计划是否学习完成
                    topictTiTLE:'ajax中的type、url、data、success、error等参数都有什么作用?',//小题的内容
                    project:1,//附件
                },
                {
                    h:'2',//对应的数字
                    id:1,//对应的id
                    title:'学习js高级',//学习计划具体内容
                    value:false,//学习计划是否学习完成
                    topictTiTLE:'解释一下，显式原型链和隐式原型链。',//小题的内容
                    project:0,//附件
                }
            ],
        }
    },
    mounted(){
        console.log(escape("你好"));
    },
    methods:{
        // 跳转到答题页面
        jump(id,title){
            // this.$router.push({path:`/LeftSider/ProcessTitle/${id}/${escape(title)}`})
            let news=this.$router.resolve({path:`/LeftSider/ProcessTitle/${id}/${escape(title)}`})
            window.open(news.href, '_blank');
        },
        //附件的查看
        projectClick(){
            this.projects.keys=true
        },
        //关闭附件查看
        projectClose(){
            this.projects.keys=false
        }
    }
}
</script>

<style lang="less" scoped>
    .ProcessWriteVessels{
        .myProcessVessels{
            margin: 20px 0;
        }
        .projects{
            display: inline-block;
            height: 20px;
            color: #409eff;
            cursor: pointer;
            position: relative;
            top: -3px;
            margin: 0 10px;
            padding: 0px 10px;
            font-size: 12px;
            font-weight: 500;
            i{
                font-size: 14px;
            }
            .projectNumber{
                position: absolute;
                top: -5px;
                left: 52px;
                height: 15px;
                color: #fff;
                background-color: #409eff;
                padding: 0 5px;
                border-radius: 7px;
                line-height: 15px;
                text-align: center;
            }
        }
        #now{
            margin-bottom: 20px;
            &::after{
                content: "*";
                color: red;
            }
        }
        #name{
            text-align: center;
        }
        width: 100%;
        .b{
            color: black;
        }
        .myProcessTitle{
            width: 100%;
            padding-left: 20px;
            color: #8b8a8a;
            font-size: 14px;
            line-height: 30px;
            font-weight: 600;
            .ipt{
                margin-right: 10px;
            }
        }
        .topic{
            .eixt{
                a{
                    text-decoration: none;
                    color:rgba(64, 158, 255,1) ;
                    cursor: pointer;
                }
            }
        }
    }
    #projectVessels{
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 0, .7);
        z-index: 888;
        .projectMiddle{
            width: 500px;
            max-width: calc(100% - 32px);
            height: 500px;
            max-height: calc(100% - 32px);
            background-color: #ffffff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            border-radius:5px;
            @height:30px;
            padding-top: @height;
            .projectHeader{
                width: 100%;
                height: @height;
                position: absolute;
                top: 0;
                left: 0;
                padding: 0 10px;
                color: #303133;
                line-height: 30px;

                .projectClose{
                    width: 30px;
                    height: 30px;
                    position: absolute;
                    top: 0;
                    right: 10px;
                    line-height: 30px;
                    text-align: center;
                    font-size: 25px;
                    cursor: pointer;
                }
            }
            .projectContent{
                width: 100%;
                height: 100%;
                padding: 20px;
                overflow-y:auto;
                .aloneProject{
                    width: 100%;
                    padding-right: 100px;
                    position: relative;
                    line-height: 30px;
                    border-bottom: 1px dashed #8b8a8a;
                    background-color: #ffffff;
                    transition: all .3s;
                    &:hover{
                        background-color: rgba(64, 158, 255,.2);
                    }
                    .loadingTopic{
                        position: absolute;
                        top: 0;
                        right: 0;
                        height: 30px;
                        line-height: 30px;
                        text-align: center;
                        color: #409eff;
                        cursor: pointer;
                    }
                }
                &::-webkit-scrollbar {
                    /*滚动条整体样式*/
                    width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
                    height: 1px;
                }
                &::-webkit-scrollbar-thumb {
                    /*滚动条里面小方块*/
                    border-radius: 10px;
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    background   : #535353;
                }
                &::-webkit-scrollbar-track {
                    /*滚动条里面轨道*/
                    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
                    border-radius: 10px;
                    background   : #ededed;
                }
                .text{
                    height: 400px;
                }
            }
        }
    }
</style>